<template>
  <div>
    <div class="routerView">
      <router-view />
    </div>
    <van-tabbar v-model="active" active-color="#1659E2FF" inactive-color="#000"
     >
      <van-tabbar-item to="/xcHome">
        <img slot="icon" :src="$route.path === '/xcHome'
        ? require('../assets/xcHome/newXcHome/1-1.png')
        : require('../assets/xcHome/newXcHome/1.png')
      " />
        泊位
      </van-tabbar-item>
      <van-tabbar-item to="/work" >
        <img slot="icon" :src="$route.path === '/work'
        ? require('../assets/xcHome/newXcHome/2-2.png')
        : require('../assets/xcHome/newXcHome/2.png')
      " />
        订单
      </van-tabbar-item>
      <van-tabbar-item to="/address" >
        <img slot="icon" :src="$route.path === '/address'
        ? require('../assets/xcHome/newXcHome/3-3.png')
        : require('../assets/xcHome/newXcHome/3.png')
      " />
        消息
      </van-tabbar-item>
      <van-tabbar-item to="/userInfo">
        <img slot="icon" :src="$route.path === '/userInfo'
        ? require('../assets/xcHome/newXcHome/4-4.png')
        : require('../assets/xcHome/newXcHome/4.png')
      " />
        我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";

export default {
  name: "App",
  data() {
    return {
      supportOA: setting.supportOA,
      tabbarModel: 0,
      messageNumForAddress:'8',
      tabbarNumForWork:'5',
      active: 0,
    };
  },
  created() {
    this.setTabbarModel();
  },
  methods: {
    setTabbarModel() {
      let pathArr = [
        { id: 0, name: "/home" },
        { id: 1, name: "/news" },
        { id: 2, name: "/notice" },
        { id: 3, name: "/userInfo" }
      ];
      let _fifler = pathArr.filter(
        ({ name }) => this.$route.path.indexOf(name) > -1
      );
      let _index = _fifler.length ? _fifler[0].id : 0;
      this.tabbarModel = _index;
    },
  },
 
};
</script>

<style scoped lang="less">
.routerView {
  margin-bottom: 60px;
}

.van-tabbar {
  height: 60px;
  box-shadow: 0 1px 5px 1px #ddd;

  .van-tabbar-item {
    margin-bottom: 10px;
  }

  /deep/.van-tabbar-item__text {
    font-size: 12px;
    display: inline-block;
  }
}

/deep/.van-tabbar-item__icon img {
  height: 28px;
}
</style>
